<script lang="ts">
import { defineComponent } from 'vue'
const { t } = useI18n()
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
import request from '@/config/axios'
import '@/assets/iconfont/iconfont.css'
import router from '@/router'
export default defineComponent({

  name: "Demo03Student",
  components: {
    // Demo03StudentForm
  },
  data() {
    return {
      // 遮罩层
      t,
      DICT_TYPE,
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 学生列表
      list: [],
      data: [],
      // 是否展开，默认全部展开
      isExpandAll: true,
      // 重新渲染表格状态
      refreshTable: true,
      // 选中行
      currentRow: {},
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        name: null,
        status: [] as any,
        date: null as any,
        queryState: null,
        description: null,
        createTime: [],
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询列表 */
    handleAdd(params: any) {
      if (!params) {
        router.push({ path: '/quatations/quotationManage/create', query: {} })
      } else {
        // 从带数据状态的页面跳转过来，需要根据参数带出默认数据
      }

    },
    _getStrDictOptions(type) {
      return getStrDictOptions(type)
    },
    queryTable() { },
    async getList() {
      try {
        this.loading = true;
        const res = await request.get({ url: 'http://localhost/mock/userInfo' });
        console.log(res)
        if (res.code == 0) {
          this.data = res.data.categoryList
          this.list = res.data.tableList
          this.total = res.data.tableList.length
        } else {
          // error handle
        }
      } finally {
        this.loading = false;
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 添加/修改操作 */
    openForm(id) {
      this.$refs["formRef"].open(id);
    },
    /** 删除按钮操作 */
    async handleDelete(row) {
      // const id = row.id;
      // await this.$modal.confirm('是否确认删除学生编号为"' + id + '"的数据项?')
      // try {
      //   // await Demo03StudentApi.deleteDemo03Student(id);
      //   await this.getList();
      //   this.$modal.msgSuccess("删除成功");
      // } catch { }
    },
    /** 导出按钮操作 */
    async handleExport() {
      // await this.$modal.confirm('是否确认导出所有学生数据项?');
      // try {
      //   this.exportLoading = true;
      //   // const data = await Demo03StudentApi.exportDemo03StudentExcel(this.queryParams);
      //   this.$download.excel(data, '学生.xlsx');
      // } catch {
      // } finally {
      //   this.exportLoading = false;
      // }
    },
  }
}) 
</script>

<template>
  <div>
    <el-card shadow="never" class="mainCard">
      <div class="state flex flex-row w-[95%] gap-10 items-center">
        <el-card class="w-[17%] h-25 cursor-pointer" v-for="(item, index) in data" :key="index">
          <div class="stateBox flex flex-row justify-evenly items-center">
            <span class="iconfont" :class="`icon-${item.type}`"></span>
            <div class="info ">
              <span class="num block w-full text-3xl text-center">{{ item.count }}</span>
              <span class="desc block w-full text-center font-serif  ">{{ item.status }}</span>
            </div>
          </div>
        </el-card>
      </div>
      <div class=" flex items-center mx-8 hborder ">
        <el-button class="" size="large" type="primary" @click="() => handleAdd(null)">新建报价单</el-button>
      </div>
    </el-card>
  </div>
  <div class="app-container">
    <!-- 搜索工作栏 -->

    <div class="headerWrap flex flex-row  items-center justify-between">
      <div class="titleBar flex flex-row items-center">
        <svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" viewBox="0 0 24 24">
          <path fill="#ccc"
            d="M4.808 9.616q-.343 0-.576-.233T4 8.808V6.923q0-.343.232-.575t.576-.232h1.884q.343 0 .576.232t.232.575v1.885q0 .343-.232.575t-.576.233zm4.077 0q-.344 0-.576-.233q-.232-.232-.232-.575V6.923q0-.343.232-.575t.575-.232h10.308q.344 0 .576.232t.232.575v1.885q0 .343-.232.575t-.576.233zm0 3.923q-.344 0-.576-.233q-.232-.232-.232-.575V11q0-.343.232-.575q.232-.233.576-.233h10.307q.344 0 .576.232T20 11v1.73q0 .344-.232.576t-.576.233zm0 4.077q-.344 0-.576-.233q-.232-.232-.232-.575v-1.885q0-.343.232-.576t.575-.232h10.308q.344 0 .576.232q.232.233.232.576v1.885q0 .343-.232.575t-.576.233zm-4.077 0q-.344 0-.576-.233T4 16.808v-1.885q0-.343.232-.576t.576-.232h1.884q.343 0 .576.232q.232.233.232.576v1.885q0 .343-.232.575t-.576.233zm0-4.077q-.344 0-.576-.233T4 12.731V11q0-.343.232-.575t.576-.233h1.884q.343 0 .576.232T7.5 11v1.73q0 .344-.232.576t-.576.233z" />
        </svg>
        <span class="text-16px">报价单列表</span>
      </div>
      <el-form :model="queryParams" class="flex flex-row items-center py-5 px-6  " ref="queryForm" size="small"
        :inline="true" v-show="showSearch" label-width="78px">
        <el-form-item label="" prop="date">
          <el-date-picker clearable v-model="queryParams.date" size="default" type="datetimerange"
            value-format="yyyy-MM-dd" placeholder="请选择日期" />
        </el-form-item>
        <el-form-item label="" prop="status">
          <el-select v-model="queryParams.status" multiple collapse-tags style="width: 139px" placeholder="请选择状态"
            size="default">
            <el-option v-for="(dict, index) in _getStrDictOptions(DICT_TYPE.QUOTATION_STATUS)" :label="dict.label"
              :value="dict.value" :key="index" />
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="queryState">
          <el-input v-model="queryParams.queryState" size="default" style="width: 274px"
            placeholder="请输入项目名称/报价单编号/客户/责任人" clearable @keyup.enter="handleQuery" />
        </el-form-item>
        <!-- <el-form-item label="创建时间" prop="createTime">
        <el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss"
          type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']" />
      </el-form-item>-->
        <el-form-item>
          <el-button type="primary" @click="handleQuery">搜索</el-button>
          <!-- <el-button icon="el-icon-refresh" @click="resetQuery">重置1</el-button> -->
          <el-button plain size="small" @click="handleExport">导出</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table class="w-full" :data="list" :stripe="true" :show-overflow-tooltip="true">
      <el-table-column type="selection" width="55" />
      <el-table-column align="center" type="index" label="序号" prop="id" width="80" />
      <el-table-column align="center" label="报价单编号" prop="quoteNumber" width="150" />
      <el-table-column align="center" label="项目名称" prop="projectName" width="200" />
      <el-table-column align="center" label="日期" prop="date" width="120" />
      <el-table-column align="center" label="客户" prop="customer" width="150" />
      <el-table-column align="center" label="联系人" prop="contact" width="150" />
      <el-table-column align="center" label="制作方" prop="maker" width="150" />
      <el-table-column align="center" label="责任人" prop="responsiblePerson" width="150" />
      <el-table-column align="center" label="项目报价" prop="projectQuote" width="150" />
      <el-table-column align="center" label="状态" prop="status" width="120" />
      <el-table-column align="center" label="操作" prop="action" />
    </el-table>
    <!-- 分页组件 -->
    <pagination class="myPagination" layout=" total, prev, pager, next, jumper," v-show="total > 0" :total="total"
      :page="queryParams.pageNo" :limit="queryParams.pageSize" @pagination="getList" />
    <!-- 对话框(添加 / 修改) -->
    <!-- <Demo03StudentForm ref="formRef" @success="getList" /> -->
  </div>
</template>

<style lang="scss" scoped>
.el-button--large {
  --el-button-size: 52px;
}

.mainCard {
  &> :deep(.el-card__body) {
    display: flex;
  }
}

.myPagination {
  width: 100%;

  &> :deep(.el-pagination__total) {
    flex: 1;
    color: #999;
    font-weight: bold;
  }


}

.hborder {
  position: relative;

  &::before {
    position: absolute;
    content: "";
    display: block;
    width: 2px;
    height: 76%;
    left: -40px;
    background-color: rgba(160, 159, 158, 0.4);
  }
}

.el-form-item {
  margin-bottom: 0;
}
</style>
